<template>
  <div>
      <van-cell class="comment-item">
        <van-image
         slot="icon"
          class="ava-img"
          round
          :src="comment.aut_photo"
        />
        <div slot="title">
          <div class="header-top">
            <p class="name">{{comment.aut_name}}</p>
             <div class="like" @click="onLike">
                <van-icon
                :name="comment.is_liking ? 'good-job' : 'good-job-o'"
                class="like-icon"
                :class="{liked:comment.is_liking}"
                ></van-icon>
                <span class="like-num">{{comment.like_count}}</span>
            </div>
          </div>
           <p class="content">{{comment.content}}</p>
           <div class="butttom-con">
             <span class="time">{{comment.pubdate | dateTime('MM-DD HH:mm')}}</span>
             <van-button round size="mini" class="btn" @click="$emit('reply-click',comment)">{{comment.reply_count}}回复</van-button>
           </div>
        </div>
      </van-cell>
  </div>
</template>

<script>
import {addLike,delLike} from '@/api/comment.js'
export default {
  props:{
    comment:{
      type:Object,
      required:true
    }
  },
  methods:{
  async  onLike(){
      const commentId=this.comment.com_id.toString()
      if(this.comment.is_liking){
        await delLike(commentId)
        this.comment.like_count--
      }else{
        await addLike(commentId)
        this.comment.like_count++
      }
      //更新视图
      this.comment.is_liking=!this.comment.is_liking
    }
  }
}
</script>

<style lang="less" scoped>
.comment-item{
  .ava-img{
   width:36px;
   height: 36px;
   margin-right: 12px;
  }
  .header-top{
     display: flex;
     justify-content: space-between;
  }
 .name{

    font-size: 14px;
    color: #406599;
 }
 .content{
   font-size:16px;
   color: #222;
 }
 .time{
    font-size: 10px;
    margin-right: 10px;
 }
 .butttom-con{
   display: flex;
    align-items: center;
    justify-content: left;
 }
 .like{
    display: flex;
    align-items: center;
    justify-content: center;
    .liked{
        color:#ff69b4;
    }
 }
}

</style>
